<template>
  <div>
    <div class="absolute right-20 z-[99999999999999999999] bottom-82 text-lg flex gap-4 items-center">
      <span>隐藏所有数据</span>
      <el-switch v-model="isShowData" size="large" />
    </div>
    <div v-show="isShowData">
      <div class="h-[60px] absolute z-50 top-[500px] left-[2250px] cflex text-[12px]">
        <img :src="Box3" class="w-full h-full" />
        <div class="flex items-center gap-3 absolute left-2 ml-16">
          <div class="flex flex-col items-center">
            <span class="gradient-text fzxbs">{{ vf('/1880/FUC/L2/SLAB/DiscTemp') }}</span>
            <span>出炉温度</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import Box3 from '@/assets/imgs/box_temp.png'
import { getL1Data } from '@/api/api'
import { ref, onMounted, onUnmounted, watch } from 'vue'

const isShowData = ref(true)

const dataMap = ref({})

const fetchData = async () => {
  try {
    const res = await getL1Data()
    const map = {}
    if (res && Array.isArray(res.data)) {
      for (const item of res.data) {
        map[item.asset_alias] = item.value
      }
    }
    dataMap.value = map
  } catch (e) {
    console.error('getL1Data error:', e)
  }
}

let timer = null
onMounted(() => {
  fetchData()
  timer = setInterval(fetchData, 10000)
})
onUnmounted(() => {
  if (timer) clearInterval(timer)
})

const vRaw = (alias) => dataMap.value[alias]

const formatNumber = (v) => {
  if (v === null || v === undefined) return '--'
  const n = Number(v)
  if (!Number.isFinite(n)) return '--'
  return Number.isInteger(n) ? String(n) : n.toFixed(1)
}

const vf = (alias) => formatNumber(vRaw(alias))
</script>

<style lang="scss" scoped>
.gradient-text {
  background: linear-gradient(to bottom, #dce0ff, #06fcff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 兼容 Firefox */
  background-clip: text;
  color: transparent;
}
</style>
